<template>
  <div class="trade-container">
    <el-table ref="multipleTable" :data="tableData.data" tooltip-effect="dark" stripe highlight-selection-row>
      <el-table-column prop="account" label="账户"></el-table-column>
      <el-table-column prop="cnName" label="账号权限"></el-table-column>
      <el-table-column prop="userId" label="用户id"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-link type="primary" @click="editQuotaClick(scope.row)">证件配置</el-link>
          <el-link style="margin-left: 10px" type="primary" @click="quotaNumPopup(scope.row.userId)">额度统计</el-link>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :page-size="15" :total="pageTotal" @current-change="currentChange"/>
  </div>
  <editQuota :id="selectId" :certNum="certNum" v-if="showEdit" @showEditEmit="showEditEmit"></editQuota>
  <quotaNum :id="userId" v-if="showQuotaNum" @quotaClose="quotaNumCol"></quotaNum>
</template>

<script setup>
import { reactive,ref } from "vue";
import {ElLoading, ElMessage} from "element-plus";
import {_getQuotaList} from "../../http/api.js";
import editQuota from './editQuota.vue'
import quotaNum from './quotaNum.vue'


const showQuotaNum = ref(false)
const userId = ref('')

const tableData = reactive({
  data:[]
})
const pageTotal = ref(); // 总数
let pageIndex = ref(1);
const selectId = ref('');
const showEdit = ref(false);
const certNum = ref(0);

// 获取额度列表
const getQuotaList = (pageIndex) => {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
  })
  _getQuotaList(pageIndex)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          pageTotal.value = item.total;
          let records = res.data.data.records;
          tableData.data = records;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({ message: '网络异常', type: 'error'});

      })
}
getQuotaList(pageIndex.value);
// 分页点击
const currentChange = (index) => {
  pageIndex.value = index;
  getQuotaList(index);
}
// 修改额度点击
const editQuotaClick = (item) => {
  showEdit.value = true;
  certNum.value = item.certNum;
  selectId.value = item.userId;
}
// 监听关闭
const showEditEmit = () => {
  showEdit.value = false;
  getQuotaList(pageIndex.value);
}

// 显示额度统计
const quotaNumPopup = (id) => {
  console.log(id);
  userId.value = id;
  showQuotaNum.value = true;
}
// 监听关闭
const quotaNumCol = () => {
  userId.value = '';
  showQuotaNum.value = false;
}
</script>

<style lang="scss" scoped>
.trade-container{
  padding: 10px;
}
.icon-style{
  font-size: 24px;
  cursor: pointer;
}
.face-img-box{
  width: 50px;
  height: 65px;
}
</style>
